<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue简易计算器</title>
    <script src="../../js/vue.js"></script>
    <!-- 编写一个加减乘除简易计算器 -->
   
    <style>
        #app{
            width: 50%;
            margin: 3rem auto;
            display: flex;
            justify-content: space-around;
        }
        input{
            width: 2rem;
            text-align: center;
          
        }
        span{
            color: red;
          
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>
            <input type="text" v-model="number_1"> 
          
                <select v-model="maths">
                    <option value="add"> + </option>
                    <option value="jian"> - </option>
                    <option value="cheng"> * </option>
                    <option value="chu"> / </option>
                </select>
            
            <input type="text" v-model="number_2">
            <button @click="change">=</button>
            <span> {{count|fixed}}</span>
        </h2>  
    </div>
    <script>
        var v_app = new Vue({
            el:"#app",
            data:{
                maths:"",
                number_1:0,
                number_2:0,
                count:"0",
            },
            methods:{
                change(){
                    let temp = 0;
                    switch(this.maths){
                        case "add":{
                            temp = Number(this.number_1)+Number(this.number_2)
                            break
                        }
                        case "jian":{
                            temp = Number(this.number_1)-Number(this.number_2)
                            break
                        }
                        case "cheng":{
                            temp = Number(this.number_1)*Number(this.number_2)
                            break
                        }
                        case "chu":{
                            if(this.number_2 != 0){
                                temp = Number(this.number_1)/Number(this.number_2)
                            }else{
                                temp ="无法除以0"
                            }
                            break
                        }
                    }
                    this.count = temp;
                }
            },
            filters: {
                fixed(str) {
                    if(str == "无法除以0"){
                        return str;
                    }else{
                        return Number(str).toFixed(2);
                    }
                }
            }
        })
    </script>
</body>
</html>